<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/template-native.js"></script>
    <script type="text/html" id="tem">
        <% for(let i=0; i< comments.length; i++){  %>
            <li uId='<%= comments[i].id %>'>
                <p>
                    <span><%= comments[i].id %>楼</span><a href="javascript:;" class="del">删除</a>
                </p>
                <p>
                    <span class="author"><%= comments[i].userName %>: </span>
                    <span><%= comments[i].content %></span>
                </p>
                <p>
                    <%= comments[i].time %>
                </p>
            </li>
            <% }   %>
    </script>
</head>

<body>
    <div class="message">
        <!-- 留言楼主区域 -->
        <div class="stairs-top">
            <div class="headPortrait">
                <img src="images/icon.jpg" alt="">
            </div>
            <div class="content">
                <h4 class="user">央视新闻</h4>
                <div class="time">今天 06:55:24</div>
                <div class="para">
                    【谢谢你！#和平年代的守护者#】早已习惯了他们的守护。雨雪天他们值守路面保障交通，险情中他们冲锋在前扶危解困， 节日里他们披星戴月为万家灯火保驾护航……他们把“平安”写进名字，我们把“平安”写进祝福！ #今天中国人民警察节#，一起致敬中国人民警察！ ​​​​
                </div>
                <div class="pic">
                    <img src="images/01.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 发表回复 -->
        <div class="stairs-bottom">
            <div class="replay">
                <h5>发表回复</h5>
                <label for="userName">用户名 : </label><input type="text" id="userName"><br>
                <textarea id="detail" cols="30" rows="10"></textarea>
                <input type="button" value="发表" class="btn">
            </div>
            <!-- 留言层主区域 -->
            <ul class="messageInfo">

            </ul>
        </div>

    </div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    // 获取元素
    let $userName = $('#userName');
    let $detail = $('#detail');
    let $btn = $('.btn');


    // 获取后台资源,渲染页面
    $.ajax({
        url: "http://localhost:3000/db",
        type: 'GET',
        dataType: "json",
        success: function(data) {
            // console.log(data);
            $('.messageInfo').html(template('tem', data));
            getDelete();
        }
    });
    //发送事件
    $btn.click(function() {
        //  动态获取时间
        let date = new Date();
        let h = date.getHours();
        h = h < 9 ? ' 0' + h : h
        let m = date.getMinutes();
        m = m < 9 ? '0' + m : m
        let s = date.getSeconds();
        s = s < 9 ? '0' + s : s;
        console.log(`${h}:${m}:${s}`);
        time = `${h}:${m}:${s}`;
        // 动态获取input框里的值
        let userName = $userName.val();
        let content = $detail.val();
        $.ajax({
            url: "http://localhost:3000/comments",
            type: 'POST',
            dataType: 'json',
            data: {
                userName,
                content,
                time
            },
            success: function(data) {
                $('.messageInfo').append(template('tem', {
                    'comments': [data]
                }));
                getDelete()
            }
        });

        $userName.val('');
        $detail.val('');
    });

    function getDelete() {
        $('.del').click(function() {
            $li = $(this).parents('li')
            let index = $li.attr('uId');
            // console.log(index);
            $.ajax({
                url: 'http://localhost:3000/comments/' + index,
                type: 'DELETE'
            })
            $li.remove();
        })
    }
</script>

</html>